import Taro, { Component, Config } from '@tarojs/taro';
import { View,Text,Image } from '@tarojs/components';
import { AtIcon , AtTabs, AtTabsPane } from "taro-ui";

const btn=[
  {text:'今日'},
  {text:'昨日'},
  {text:'本月'},
  {text:'上日'},
];
const detailInfo=[
  {text:'全部付款收益',keyName:''},
  {text:'自购付款收益',keyName:''},
  {text:'团队付款收益',keyName:''},
  {text:'全部付款笔数',keyName:''},
  {text:'自购付款笔数',keyName:''},
  {text:'团队付款笔数',keyName:''},
  {text:'全部收获收益',keyName:''},
  {text:'自购收获收益',keyName:''},
  {text:'团队收货收益',keyName:''},
  {text:'全部收货笔数',keyName:''},
  {text:'自购收货笔数',keyName:''},
  {text:'团队收货笔数',keyName:''},
];
class Profit extends Component{
  config: Config = {
    navigationBarBackgroundColor: '#ff4b82',
    navigationBarTextStyle: "white",
    navigationBarTitleText: '我的收益'
  };
  state={
    date:0
  };

  fnGetInfo= date =>{
    // 获取数据
    // ...
    this.setState({date});
  };

  render(){
    const {date}=this.state;
    return(
      <View>
        <View className='Header'>
          <View>累计收益</View>
          <View className='allProfit'>19.89</View>
          <View>每月25号结算上月收货收益</View>
        </View>

        <View className='detailProfit'>
          <View>
            <View className='money'>192.28</View>
            <View>上月收货收益(元)</View>
          </View>
          <View>
            <View className='money'>192.28</View>
            <View>上月收货收益(元)</View>
          </View>
          <View>
            <View className='money'>192.28</View>
            <View>上月收货收益(元)</View>
          </View>
        </View>

        <View className='detailInfo'>
          <View className='detailInfoHeader'>
            <Text className='title'>收益数据</Text>
            <View className='selectBox'>
              {
                btn.map((item,index)=>(
                  <Text
                    onClick={this.fnGetInfo.bind(this,index)}
                    key={index}
                    className={date===index?'activity':''}
                  >
                    {item.text}
                    </Text>
                ))
              }
            </View>
          </View>

          <View className='infoBox'>
            {
              detailInfo.map((item,index)=>(
                <View className='infoItem' key={index}>
                  <View className='num'>192.28</View>
                  <View>{item.text}</View>
                </View>
              ))
            }
          </View>

        </View>
      </View>
    )
  }
}

export default Profit;
